<template>
<div class="login-outside">
  <div class="login-card">
    <div class="left">

    </div>
    <div class="right">
      <h1>登录</h1>
      <input type="text" placeholder="用户名" v-model="account">
      <input type="password" placeholder="密码" v-model="password">
      <button @click="buttonLogin">登录</button>
    </div>
  </div>
</div>
</template>

<script setup>
import { ref } from 'vue'
import useLogin from "@/api/login/useLogin.js";
import {useTokenStore} from "@/store/token.js";
import {useRouter,useRoute} from "vue-router";
import useMap from "@/utils/useMap.js";
import userAirline from "@/api/airline/userAirline.js";

const router = useRouter()
const route = useRoute()
const map = useMap();
const airline = userAirline();

const useToken = useTokenStore()
let login = useLogin()

let account = ref()
let password = ref()

function buttonLogin(){
  login(account.value,password.value).then( (res)=>{
    useToken.setToken(res.data.data.token)
    localStorage.setItem("token",res.data.data.token)
  }).then( ()=>{
    console.log("登录成功")
    airline().then( (res)=>{
      console.log(res.data)
    })
    router.push({path:"/main"})
  })
}

</script>

<style scoped>
.login-outside{
  display: flex;
  height: 100%;
  width: 100%;
  background-color: skyblue;
}
.login-card{
  display: flex;
  margin: auto;
  background-color: white;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 0 10px 0 rgba(0,0,0,0.75);
  width: 50%;
  height: 50%;
}
.left, .right{width: 50%;}
.left{
  background-image: url("@/assets/ocean-3605547_1280.jpg");
  background-size: cover;;
  background-repeat:no-repeat;

  border-radius: 10px 0 0 10px;
  box-shadow: 0 0 10px 0 rgba(0,0,0,0.75);
}
.right{
  padding: 20px;
  border-radius: 0 10px 10px 0;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.right h1{
  font-family: '微软雅黑',serif;
  font-weight: 100;
  text-align: center;
  font-size: 30px;
  margin: 0;
}
.right input{width: 100%;
  border-radius: 5px;
  padding: 10px;
  font-family: '微软雅黑',serif;
  font-weight: 100;
  font-size: 20px;
  border: 1px solid black;;
}
.right button{
  background-color: skyblue;
  border: 0;
  border-radius: 5px;
  padding: 10px;
}
.right button:hover{
  cursor: pointer;
  box-shadow: 0 0 2px 0 rgba(0,0,0,0.75);
}

</style>